<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>商品详情</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" href="/favicon.ico">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <link rel="stylesheet" href="/staticFiles/css/sm/sm.min.css">
    <link rel="stylesheet" href="/staticFiles/css/sm/sm-extend.min.css">
    <link rel="stylesheet" href="/staticFiles/css/main.css">
    
    
    <style type="text/css">
    	.content-title {
    		
    	}
    </style>
  </head>
  <body>
     <!-- 你的html代码 -->
    <script type='text/javascript' src='/staticFiles/json/goods.json?var=11111' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/zepto/zepto.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/sm/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/sm/sm-extend.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='/staticFiles/js/main.js' charset='utf-8'></script>

    <div class="page">
  <div class="content"  style="/*bottom: 2.2rem;*/padding-bottom: 2.2rem;">
  	<div class="goods-detail-list goods-detail-view">
  		<img id="goods-image" alt="" src="/staticFiles/image/goods/0001.png">
  		<div class="goods-detail-show">
  			<div id="goods-name">商品名字</div>
  			<div id="goods-level">
				<ul>
					<li>
						<span class="icon icon-good-start1"></span>
					</li>
				</ul>
			</div>
  			<div class="" style="display: inline-block;width: 100%;">
  					<div style="float: left;">
  						<font id="goods-price" ></font>元
  					</div>
  					<div class="goods-after" style="float: right;display: inline-block;"><span id="goods-sale"></span>人购买</div>
  			</div>
  		</div>
  	</div>
  	<div class="goods-detail-list goods-detail-img">
  	<h3>图片预览</h3>
  	<ul class="img-list">
  		<li><img src="/staticFiles/image/goods/00011.jpg"/></li>
  	</ul>
  	</div>
  	<div class="goods-detail-list  goods-detail-coment">
  	<h3>商品详情</h3>
  	<p id="goods-detail">
  	
  	</p>
  	</div>
	  
	  <nav class="bar bar-bottom pos-fixed-content" >
	  		<a class="goods-item goods-cart">
	  			<span class="icon icon-cart"></span>
			    <span class="goods-content">购物车</span>
			    <span class="badge">0</span>
	  		</a>
	  		<a class="goods-item goods-start">
	  			<span class="icon icon-star"></span>
			    <span class="goods-content">收藏</span>
	  		</a>
	  		<div class="goods-bar">
	  			<a class="btn button-addcart" href="#"  onclick="$.toast('敬请期待');">加入购物车</a>
	  			<a class="btn button-buy" href="#" onclick="$.toast('敬请期待');">立即购买</a>
	  		</div>
		</nav>
  </div>
</div>
<script type="text/javascript">
$(function() {
	
	var basePath = '/staticFiles/image/goods/';
	var obj = getObject(URLPARAM.goodsId);
	
	//设置图片
	var imgStr = obj.images; 
	if(imgStr && imgStr != ''){
		var  liStr = '';
		var imgObj = imgStr.split(',') ;
		for(var key in imgObj){
			liStr += '	<li><img src="/staticFiles/image/goods/'+  imgObj[key]  +'"/></li>';
		}
		$('.img-list').html(liStr);
	}	
	$('#goods-image').attr('src',obj.img);
	$('#goods-name').html(obj.name);
	$('#goods-price').html(obj.price);
	var level = obj.level;
	if(!/[0-9]/.test(level)){
		level = 4;
	}
	var ul = '<ul>';
	for(var i=0;i<5;i++){
		var li = '<li>	<span class="icon icon-good-start2"></span></li>';
		if(i<level){
			li = '<li>	<span class="icon icon-good-start1"></span></li>';
		}
		ul += li;
	}
	ul += '</ul>';
	$('#goods-level').html(ul);
	
	$('#goods-sale').html(obj.sale?obj.sale : 0);
	var detail = obj.detail;
	if(detail && detail != ''){
		var imgs = '';
		var detailObj = detail.split(',');
		for(var key in detailObj){
			imgs += '<img src="'+ basePath + detailObj[key] + '" />'
		}
		$('#goods-detail').html(imgs);
	}
});
</script>
  </body>
</html>